<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/click.css" />
	</head>

	<body>
		<div class="index">
			<p>LAST</p>
			<p>ONE</p>
			<div class="text">FOCUS VISION ON THE SCREEN</div>
			<div><button type="button" class="btn">STRAT</button></div>
			<p>TIPS:</p>
			<p>CLICK POINT ON A LAST SEEN</p>
		</div>
		<div class="first"></div>
		<div class="transition"></div>
		<div class="box">
			<p class="timeBox"></p>
			<div class="circle"></div>
		</div>

		<script type="text/javascript" src="js/Click.js">

		</script>
		<script type="text/javascript">
			// var box = document.querySelector(".box");
			// function getCircle(){
			// 	var div = document.createElement("div");
			// 	var clientH = box.offsetHeight;
			// 	var clientW = box.offsetWidth;
			// 	console.log(clientH,clientW)
			// 	div.style.borderRadius="50%";
			// 	div.style.backgroundColor="#FFFFFF";
			// 	div.style.position="absolute";
			// 	//随机生成球的宽高,且直径不小于15
			// 	var divWidth = divH = parseInt(Math.random()*40+15);
			// 	div.style.width=`${divWidth}px`;
			// 	div.style.height=`${divH}px`;

			// 	//随机生成top值,left值
			// 	var divT = parseInt(Math.random()*clientH);
			// 	var divW = parseInt(Math.random()*clientW);
			// 	//防止超出屏幕,超出最大Top/left,则让球贴边
			// 	divT > clientH - divH ? divT = clientH - divH:"";
			// 	divW > clientW - divWidth ? divW = clientW - divWidth:"";
			// 	div.style.top=divT+"px";
			// 	div.style.left=divW+"px";
			// 	var allBall = document.querySelectorAll(".box div");
			// 	allBall.forEach(function(e){
			// 			e.classList.remove("lastOne");
			// 	})
			// 	div.classList.add("lastOne");
			// 	console.log(divT,divW);
			// 	console.log(div.getBoundingClientRect());
			// 	box.appendChild(div);
			// 	console.log(div.getBoundingClientRect())
			// 	return div;
			// }
			// getCircle();
			// var firstBall = document.querySelector(".box div");
			// firstBall.addEventListener("click",ballEvent);
			// // 球该做什么-->新增球
			// function ballEvent(){
			// 	if(this.classList.contains("lastOne")){
			// 		console.log("最后一个")
			// 	}else{
			// 		alert("Game Over,辣鸡");
			// 		return;
			// 	}
			// 		var allBall = document.querySelectorAll(".box div");
			// 		// 通过getCircle的返回值拿到每次新创建,为下一次碰撞检测提供检测对象	
			// 		var newCircle=getCircle();
			// 		(function check(target){
			// 			allBall.forEach((e)=>{
			// 				// 如果新生成的圆与已有的圆碰撞,则移除
			// 				if(bump(e,target)){
			// 					// 1.先移除
			// 					target.remove();
			// 					// 2.再创建
			// 					var newCircle=getCircle();
			// 					// 3.通过递归传入新创建的圆
			// 					check(newCircle);	
			// 				}else{
			// 					addEvent();
			// 				}
			// 			})
			// 		}(newCircle));
			// 	// addEvent();
			// }
			// //给每一个球添加事件
			// function addEvent(){
			// 	var allBall = document.querySelectorAll(".box div");
			// 	allBall.forEach(function(e){
			// 		e.addEventListener("click",ballEvent);
			// 	})
			// }
			// function bump (obj1,obj2) {
			// 	//用变量将信息存起来，减少不必要的函数调用，提高性能
			// 	var obj1Info = obj1.getBoundingClientRect();
			// 		obj2Info = obj2.getBoundingClientRect();
			// 	var t1 = obj1Info.top;
			// 		l1 = obj1Info.left;
			// 		r1 = obj1Info.right;
			// 		b1 = obj1Info.bottom;

			// 	var t2 = obj2Info.top;
			// 		l2 = obj2Info.left;
			// 		r2 = obj2Info.right;
			// 		b2 = obj2Info.bottom;
			// 		//右1<左2，左1>右2，头1>底2，底1<头2 
			// 	if(r1<l2||l1>r2||t1>b2||b1<t2){
			// 		console.log("没有碰到")
			// 		return false;
			// 	}else{
			// 		console.log("碰到啦")
			// 		return true;
			// 	}
			// }
		</script>
	</body>
</html>
